@charset "UTF-8";
html, body, div, span, h1, h2, h3, a, em, img, small, strong, dl, dt, dd, ol, ul, li, time {
  margin: 0;
  padding: 0;
  border: 0; }

html {
  font-family: monospace, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */ }

body {
  margin: 0; }

ul {
  list-style: none; }

a {
  text-decoration: none;
  color: inherit; }

#fullpage {
  opacity: 0;
  transition: opacity 0.5s ease-out; }

.section {
  background-color: #F4F7F9;
  text-align: center; }

h1 {
  margin-bottom: 3rem;
  font-size: 2.5rem;
  font-weight: bold;
  color: #14213D; }

@media screen and (max-width: 480px) {
  html {
    font-size: 16px; }
  #fp-nav {
    display: none; } }

@media screen and (min-width: 481px) and (max-width: 767px) {
  html {
    font-size: 20px; }
  #fp-nav {
    display: none; }
  .wechat {
    display: none; } }

@media screen and (min-width: 768px) {
  html {
    font-size: 24px; } }

@font-face {
  font-family: 'iconfont-resume';
  /* project id 651554 */
  src: url("//at.alicdn.com/t/font_651554_t5qgvr81s5ze61or.eot");
  src: url("//at.alicdn.com/t/font_651554_t5qgvr81s5ze61or.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_651554_t5qgvr81s5ze61or.woff") format("woff"), url("//at.alicdn.com/t/font_651554_t5qgvr81s5ze61or.ttf") format("truetype"), url("//at.alicdn.com/t/font_651554_t5qgvr81s5ze61or.svg#iconfont-resume") format("svg"); }

.iconfont-resume {
  font-family: "iconfont-resume" !important;
  font-size: 1rem;
  font-weight: normal !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon-wechat::before {
  content: "\e61d"; }

.icon-email::before {
  content: "\e64b"; }

.icon-github::before {
  content: "\e719"; }

.icon-juejin::before {
  content: "\e601"; }

.icon-tele::before {
  content: "\e614"; }

.info .avatar {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  box-shadow: 0 2px 0.2rem 0rem rgba(0, 0, 0, 0.3);
  margin: 1.5rem auto;
  background: url("../assets/avatar.jpg") center;
  background-size: cover; }

.info .name {
  font-size: 2.5rem;
  font-weight: bold;
  color: #14213D; }

.info .title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #2E3338; }
  .info .title a {
    font-size: 1rem;
    font-weight: normal;
    font-style: italic;
    color: #727582; }

.info .contacts {
  color: #727582;
  font-size: 1rem;
  margin-top: 1rem; }
  .info .contacts .contact {
    display: inline-block;
    position: relative; }
    @media screen and (max-width: 480px) {
      .info .contacts .contact {
        margin-right: 0.5rem; } }
  .info .contacts .icon-email .email {
    position: absolute;
    display: block;
    font-size: 0.7rem;
    opacity: 0;
    color: #fff;
    pointer-events: none;
    transform: translate(-50%, -90%);
    transition-property: opacity, transform;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
    cursor: pointer;
    border: 0.1rem solid #333;
    background-color: #333;
    border-radius: 4px;
    font-family: monospace, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    left: 50%;
    top: -0.5rem;
    padding: 0 0.5rem; }
  .info .contacts .icon-email:hover .email {
    opacity: 1;
    transform: translate(-50%, -100%);
    height: auto; }
  .info .contacts .icon-tele .tele {
    position: absolute;
    display: block;
    font-size: 0.7rem;
    opacity: 0;
    color: #fff;
    pointer-events: none;
    transform: translate(-50%, -90%);
    transition-property: opacity, transform;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
    cursor: pointer;
    border: 0.1rem solid #333;
    background-color: #333;
    border-radius: 4px;
    font-family: monospace, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    left: 50%;
    top: -0.5rem;
    padding: 0 1rem; }
  .info .contacts .icon-tele:hover .tele {
    opacity: 1;
    transform: translate(-50%, -100%);
    height: auto; }
  .info .contacts .icon-wechat .wechat {
    position: absolute;
    display: block;
    font-size: 0.7rem;
    opacity: 0;
    color: #fff;
    pointer-events: none;
    transform: translate(-50%, -90%);
    transition-property: opacity, transform;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
    cursor: pointer;
    border: 0.1rem solid #333;
    background-color: #333;
    border-radius: 4px;
    font-family: monospace, "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif;
    left: 50%;
    top: -0.5rem;
    width: 4.5rem;
    height: 4.5rem; }
  .info .contacts .icon-wechat:hover .wechat {
    opacity: 1;
    transform: translate(-50%, -100%);
    height: auto; }

.info .pdf {
  display: inline-block;
  margin-top: 4rem;
  font-size: .6rem;
  color: #14213D;
  text-decoration: underline; }

.education li {
  margin-top: 1.87rem; }

.education time {
  font-size: .75rem;
  color: #2E3338; }

.education .school {
  font-size: .95rem;
  color: #727582; }

.education .major {
  font-size: .85rem;
  color: #14213D; }

.experiences, .opensource {
  padding-left: 1.5rem;
  padding-right: 1.5rem; }
  .experiences .works, .opensource .works {
    display: inline-block;
    padding-left: .83rem;
    text-align: left; }
  .experiences .work, .opensource .work {
    position: relative;
    border-left: solid #14213D 0.25rem;
    padding-left: 1.67rem;
    padding-right: 1rem;
    padding-bottom: .5rem; }
    .experiences .work .target-border, .opensource .work .target-border {
      position: absolute;
      top: -.25rem;
      left: -1.21rem;
      width: 1.67rem;
      height: 1.67rem;
      border: 0.25rem solid #F4F7F9;
      border-radius: 50%;
      background-color: #14213D; }
      .experiences .work .target-border .target-dot, .opensource .work .target-border .target-dot {
        width: .25rem;
        height: .25rem;
        border: 0.46rem solid #F4F7F9;
        border-radius: 50%;
        margin: .25rem; }
    .experiences .work .company, .opensource .work .company {
      font-size: 1rem;
      font-weight: bold;
      color: #4C5C68;
      min-height: 1.67rem;
      line-height: 1.67rem; }
    .experiences .work .title, .opensource .work .title {
      font-size: .67rem;
      line-height: normal;
      color: #727582; }
    .experiences .work time, .experiences .work .abstract, .opensource .work time, .opensource .work .abstract {
      display: block;
      font-size: .5rem;
      color: #2E3338; }
    .experiences .work .tech-stack, .opensource .work .tech-stack {
      margin-top: .2rem;
      font-size: .6rem;
      color: #888888; }
    .experiences .work .description, .opensource .work .description {
      list-style: initial;
      margin-top: .4rem;
      padding-left: 1rem;
      font-size: .6rem;
      line-height: .8rem;
      color: #333; }
    .experiences .work .iconfont-resume, .opensource .work .iconfont-resume {
      font-size: 1.2rem; }
  @media screen and (max-width: 480px) {
    .experiences .work, .opensource .work {
      position: relative;
      border-left: none;
      padding-left: 0; }
      .experiences .work .target-border, .opensource .work .target-border {
        display: none; }
      .experiences .work .company::before, .opensource .work .company::before {
        position: absolute;
        left: -1.2rem;
        content: '-'; }
      .experiences .work .title, .opensource .work .title {
        display: block; } }
  @media screen and (min-width: 768px) {
    .experiences h1, .opensource h1 {
      margin-bottom: 1rem; } }

.skills .skill-container {
  display: inline-block;
  max-width: 80%;
  text-align: left; }

.skills span {
  display: inline-block;
  margin: .125rem;
  padding: .375rem;
  font-weight: bold;
  color: #fff;
  border-radius: .25rem;
  background-color: #727582; }
